<html>
<head>
	<style>
		.visible-scrollbar, .invisible-scrollbar {
		  display: block;
		  width: 10em;
		  overflow: auto;
		  height: 2em;
		}
		.invisible-scrollbar::-webkit-scrollbar {
		  display: none;
		}

		/* Demonstrate a "mostly customized" scrollbar
		 * (won't be visible otherwise if width/height is specified) */
		.mostly-customized-scrollbar::-webkit-scrollbar {
		  width: 14px;
		  height: 14px;
		 // background-color: #aaa; /* or add it to the track */
		}
		
		.mostly-customized-scrollbar {
			width: 300px;
			height: 100px;
			overflow: auto;
		}
		
		.mostly-customized-scrollbar::-webkit-scrollbar-corner {
			background-color: transparent;
		}
		
		/* Add a thumb */
		.mostly-customized-scrollbar::-webkit-scrollbar-thumb {
			background-color: rgba(0,0,0,.1);
			background-clip: padding-box;
			border: solid transparent;
			border-radius: 10px;
		}
		
		.mostly-customized-scrollbar ::-webkit-scrollbar-track {
			background-clip: padding-box;
			border: solid transparent;
			border-width: 1px;
		}
		
		.close-arrow {
		  background-image: url();
		  background-repeat: no-repeat;
		  background-position: 0% 50%;
		  padding: 8px 0px 8px 14px;
		  margin: 0px;
		}
		
		.open-arrow {
		  background-image: url();
		  background-repeat: no-repeat;
		  background-position: 0% 50%;
		  padding: 8px 0px 8px 14px;
		  margin: 0px;
		}

	</style>
</head>

<body>
	<div class="visible-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword</div>
	<div class="invisible-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword</div>
	
	<div style="margin: 20px;">
		<div style="float: center;">伪元素显示滚动条</div>
		<div class="mostly-customized-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword<br>
			And pretty tall<br>
			thing with weird scrollbars.<br>
			Who thought scrollbars could be made weeeeird?
		</div>
	</div>
	
	<div style="padding: 8px 0px 8px 14px; margin: 0px;">
		<div class="close-arrow">缩进</div>
		<div class="open-arrow">展开</div>
	</div>
</body>


</html>